<template>

    <el-dialog :visible.sync="getDialogStatus.stLogin" width="25%">
        
        <br>
        <el-tabs v-model="activePane">
            
            <el-tab-pane label="常规登录" name="first">
               
                <el-row>
                     <el-input
                        placeholder="请输入用户名"
                        v-model="username">
                        <i slot="prefix" class="el-input__icon fa fa-user"></i>
                    </el-input>
                    <br><br>
                    <el-input
                        type="password"
                        placeholder="请输入用户名"
                        v-model="password">
                        <i slot="prefix" class="el-input__icon fa fa-lock"></i>
                    </el-input>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="电话登录" name="second">
                <el-row>
                    <el-input
                        type="number"
                        placeholder="请输入手机号码"
                        v-model="username">
                        <i slot="prefix" class="el-input__icon fa fa-phone"></i>
                    </el-input>
                    <br><br>
                    <el-col :span="12">
                        <el-input
                            width="50%"
                            type="password"
                            placeholder="请输入验证码"
                            v-model="password">
                            <i slot="prefix" class="el-input__icon fa fa-envelope-o"></i>
                        </el-input>
                    </el-col>
                    <el-col :span="12" >
                        <el-button style="width:90%;margin-left:10px" type="primary">获取验证码</el-button>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
            <br>
            <span style="float:left"><el-checkbox v-model="rememberMe">记住我</el-checkbox></span>
            <span style="float:right"><a style="text-decoration: none;color:#409EFF" href="#">忘记密码</a></span>
            <br><br>
            <el-button style="width:100%" type="primary" @click="submitLogin()">{{ login_desc }}</el-button>
            <br><br>
            <el-row style="text-align:left">
                <span>其它登录方式：</span>
                <span style="float:right"><a style="text-decoration: none;color:#409EFF;line-height:20px" href="#">注册账户</a></span>
                <!-- <el-button icon="fa fa-qq" circle></el-button>
                <el-button icon="fa fa-wechat" circle></el-button>
                <el-button icon="fa fa-weibo" circle></el-button> -->
            </el-row>
        </div>
    </el-dialog>
</template>

<script>

import {mapGetters,mapMutations} from 'vuex';
export default {

    data(){
        return {
            username:"",
            password:'',
            rememberMe:false,
            login_desc:'登 录',
            activePane:'first'
        }
    },
    computed: {
        ...mapGetters(["getDialogStatus",'getUser'])
    },

    methods:{
        ...mapMutations(['closeAllDialog','login']),

        submitLogin(){
            this.login({
                username:this.username,
                password:this.password
            });
            this.closeAllDialog();
        }

    }
}
</script>

<style scoped>
.login{
    max-width:200px;
};
</style>
